<template>
  <div class="second mt-2">
    <div class="warning-title">数据大厅</div>
    <div class="box px-2"> 
      <div class="  flex justify-center">
          <div class="item-box box_left paddingLeft24 margintop36 flex align-center pre-40">
          <div class="item-tip">
            <p class="tip-title">今年累计开票数量（张）</p>
            <p class="tip-num">{{dataSecondInfo.ykpCount}}</p>
          </div>
        </div>
        <div class="item-box box_middle paddingLeft24  flex align-center pre-40">
          <div class="item-tip">
            <p class="tip-title">今年原煤运销占比</p>
            <p class="tip-num">{{dataSecondInfo.nysZb}}%</p>
          </div>
        </div> 
        <div class="item-box box_right paddingLeft24  flex align-center pre-20">
          <div class="item-tip">
            <p class="tip-title">全市销量排名</p>
            <p class="tip-num">{{dataSecondInfo.pm}}</p>
          </div>
        </div> 
      </div>
       

      <div class="flex align-center">
        <div>
          <div class="flex align-center mt-1 mb-1">
            <i class="mr-1"></i>
            <p class="colorfff">服务大厅</p>
          </div>
          <div class="item flex align-center mb-1">
            <div class="font14 colorccc mr-2">本月销售量</div>
            <div class="font16 font-weight-bold" style="color: #eb497f">
              {{dataSecondInfo.yxsl}}吨
            </div>
          </div>
          <div class="item flex align-center mb-1">
            <div class="font14 colorccc mr-2">本月开票量</div>
            <div class="font16 font-weight-bold" style="color: #fedf7a">
              {{dataSecondInfo.ykpCount}}张
            </div>
          </div>
          <div class="item flex align-center">
            <div class="font14 colorccc mr-2">月累计纳税</div>
            <div class="font16 font-weight-bold" style="color: #00e0ff">
              {{dataSecondInfo.nsPrice || 0}}万元
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex font14 justify-end mt-2 " style="color:#E9518E;">合同总量 {{dataSecondInfo.htCount}}万吨</div>
          <div id="company-chart01"></div>
        </div>
      </div>
   </div>
  </div>
</template>
<script>
import Progress from "easy-circular-progress";
var echarts = require("echarts");

import companyApi from "@/api/company/index";
export default {
  name: "companySecond",
  components: { Progress },
  data() {
    return {
      dataSecondInfo:{}
    };
  },
  mounted() {
    this.getxssjzs()
  },
  methods: {
     getxssjzs() {
      let that = this;
      companyApi
        .dataFirst({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataSecondInfo = res;
            that.draw();
 
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    draw() {
      let that = this
      var drawCharts = document.getElementById("company-chart01"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      let color = ["#00E0FF", "#007FFE"];
      let names = ["待运输", "已销售"];
      let data = [this.dataSecondInfo.dys, this.dataSecondInfo.xsCount];
      let list = [];
      let total = 0;
      for (let i in data) {
        total += data[i];
      }

      let placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };

      let rich = {
        white: {
          align: "center",
          padding: [3, 0],
          fontSize:that.getRealPX(12),
        },
      };

      for (let i in data) {
        list.push(
          {
            value: data[i],
            name: names[i],
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 10,
                borderColor: color[i],
                shadowColor: color[i],
                color: color[i],
              },
            },
          },
          {
            value: total / 30,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
      }

      let func = (params) => {
        let percent = ((params.value / total) * 100).toFixed(1);
        let name = params.name.replace(/\n/g, "");
        console.error(params,percent)
        if (params.name !== "") {
          return name + "\n{white|" + params.value + "万吨}";
        } else {
          return "";
        }
      };

      var option = {
        tooltip: {
          show: false,
        },
        // legend: {
        //     orient: 'vertical',
        //     data: names,
        //     icon: 'circle',
        //     right: '5px',
        //     top: '10px',
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: 20
        //     }
        // },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            startAngle: "90",
            center: ["50%", "50%"],
            radius: ["50%", "52%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  formatter: func,
                  rich: rich,
                  fontSize:that.getRealPX(12),
                },
                labelLine: {
                  length: 10,
                  length2: 10,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: list,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return idx * 50;
            },
          },
          {
            name: "",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["49%", "49%"],
            itemStyle: {
              color: "transparant",
            },
            startAngle: "90",
            data: [
              {
                value: total,
                name: "",
                label: {
                  normal: {
                    show: true,
                    formatter: "{b|合同总量}\n{c|{c}万吨} ",
                    rich: {
                      b: {
                        color: "#CCCCCC",
                        fontSize: that.getRealPX(10),
                        fontWeight: "400",
                        lineHeight: 12,
                      },
                      c: {
                        color: "#00E1FF",
                        fontSize: that.getRealPX(12),
                        fontWeight: "400",
                        lineHeight: 24,
                      },
                    },
                    textStyle: {
                      fontSize:that.getRealPX(28),
                      fontWeight: "400",
                    },
                    position: "center",
                  },
                },
              },
            ],
          },
        ],
      };
      console.log(option)
      drawChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
#company-chart01 {
  width: 100%;
  height: 180px;
}

.item {
  width: 242px;
  height: 48px;
  background: url('../../../assets/img/warning/icon03.png') no-repeat;
  background-size: 242px 48px;
  padding: 0 15px;
}

.second {
  width: 581px;
  height: 410px;
  background: url('../../../assets/img/company/bg02.png') no-repeat;
  background-size: 581px 410px;

  .box {
    i {
      width: 4px;
      height: 18px;
      background: #007FFE;
    }

    .colorccc {
      font-weight: 400;
    }

    .colorfff {
      font-size: 16px;
      font-weight: 400;
    }
  }

  .item-box {
    width: 33%;
    margin-top:36px;
    margin-bottom:50px;

    .item-tip {
      width: 100%;
      text-align: left;

      .tip-title {
        font-size: 15px;
        font-weight: 400;
        color: #CCCCCC;
        margin-bottom: 15px;
      }

      .tip-num {
        height: 15px;
        font-size: 18px;
        font-weight: bold;
        color: #FDE17B;

        span {
          color: #00E4FF;
          font-weight: 500;
        }
      }
    }
  }
  .pre-40{
    width:40%;
  }

  .pre-30{
    width:30%;
  }
  .box_left{
    padding-left:24px;
  }

   .box_middle{
    padding-left:24px;
  }

   .box_right{
    padding-left:24px;
  }
  
}

 
</style>
